<template>
  <!-- 第三方登录 -->
  <div class="thirdLogin">
    <van-divider class="title">其它登录方式</van-divider>
    <div class="qqAndwx">
      <!-- qq -->
      <div class="box1">
        <div class="qqBox commitBox" @click="getQQ">
          <p class="iconfont icon-QQ icFt1"></p>
        </div>
        <p class="fonts">QQ</p>
      </div>
      <!-- 微信 -->
      <div class="box2">
        <div class="wxBox commitBox" @click="showPopupWx">
          <p class="iconfont icon-weixin icFt2"></p>
        </div>
        <p class="fonts">微信</p>
      </div>
    </div>
    <p class="bttomTitle">登录即代表您已同意 <a href="#">知心购隐私政策</a></p>
    <!-- 微信授权内容 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      :style="{ height: '60%' }"
      close-icon="close"
      round
    >
      <scroller>
        <p>微信</p>
      </scroller>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false, // 微信授权弹窗
    };
  },
  props: ["qqLogo"],
  methods: {
    // qq授权弹窗
    getQQ() {
      // this.$QQ.Login.showPopup({
      //   appId: "101850878",
      //   redirectURL: "http://localhost:8080/proxy",
      // });
      window.location.href="https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1"
    },
    // 微信授权弹窗
    showPopupWx() {
      this.isShow = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.thirdLogin {
  position: relative;
  margin-top: 60px;
  .title {
    // margin: 10px 0;
    font-size: 15px;
    color: #dcdcdc;
  }

  .qqAndwx {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    .commitBox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 53px;
      height: 53px;
      border-radius: 50%;
      margin: 0 16px;
    }
    .qqBox {
      background-color: #e7f7fe;
      .icFt1 {
        font-size: 35px;
        color: #15b8f5;
      }
    }
    .wxBox {
      background-color: #e6f8e6;
      .icFt2 {
        font-size: 35px;
        color: #09bb07;
      }
    }
    .fonts {
      margin-top: 11px;
      font-size: 11px;
      text-align: center;
      color: #999;
    }
  }

  .bttomTitle {
    margin-top: 22px;
    font-size: 11px;
    color: #999;
    text-align: center;
    a {
      color: #409eff;
    }
  }

  // 授权内容
  .authBox {
    padding: 0 27px 80px;
    .loginBtn {
      width: 100%;
      height: 40px;
      margin: 10px 0;
      background-color: #15b8f5;
      color: #fff;
      font-size: 15px;
      letter-spacing: 20px;
      border-radius: 5px;
      border: none;
    }
    .permissionsBox {
      // margin-top: 50px;
      .permissionsTitle {
        font-size: 14px;
        color: #555;
        text-align: left;
        font-weight: 600;
      }
      .inlineWork {
        margin-top: 50px;
      }
    }
  }
}
</style>
